<template>
    <Layout>
      <div class="couner">
        <div class="boxl">
          <meiTanChanLiang></meiTanChanLiang>
          <jueJinJinChi></jueJinJinChi>
          <meiTanCangChu></meiTanCangChu>
        </div>
        <div class="boxc">
          <CenterBox></CenterBox>
        </div>
        <div class="boxr">
          <jingXiaRenYuan></jingXiaRenYuan>
          <anQuanJianCe></anQuanJianCe>
          <shuJuShangChuanJiance></shuJuShangChuanJiance>
          <!-- <sheBeiJianKong></sheBeiJianKong> -->
        </div>
      </div>
    </Layout>
  </template>
  <script setup>
  import Layout from "@/layout/index.vue"
  // 煤炭产量
  import meiTanChanLiang from "./components/meiTanChanLiang.vue";
  import jueJinJinChi from "./components/jueJinJinChi.vue";
  import meiTanCangChu from "./components/meiTanCangChu.vue";
  import jingXiaRenYuan from "./components/jingXiaRenYuan.vue";
  import shuJuShangChuanJiance from "./components/shuJuShangChuanJianCe.vue";
  import CenterBox from "./components/centerBox.vue";
  import anQuanJianCe from "./components/anQuanJianCe.vue";

  </script>
  <style scoped>
  .couner{
    width: 100%;
    height: 100%;
    display: flex;
    gap:10px;
  }
  .boxl,.boxr{
    width: 500px;
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-bottom: 10px;
    position: absolute;
    height: calc(100vh - 94px);
  
  }
  .boxc{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-bottom: 10px;
  }
  
  .boxl{
    left:10px;
    z-index: 1000;
  }
  
  .boxr{
    right:10px;
    z-index: 1000;
  }
  </style>